<template>    
	<div class="Echarts_capital3">
	    <div class="capital3">
			<div ref="myChart" id="myChart"  class="capitalratio" style="width: 418px;height: 189px;">
			</div>
			<div class="capital3_line">
				<img src="../../../public/images/capital/capitalline.png" >
			</div>
			<div class="capital3_list">
				<div class="capital3_lileft">
					<div class="lileftimg">
						<img src="../../../public/images/capital/capKuai@2x.png" >
					</div> 
					<div class="lilefttext" >{{mappingName}}</div>
				</div>
				<div class="capital3_liright">
					<div class="lirighttop">
						<div class="lirighttop_item">融资次数<span>{{rzNum}}次</span></div>
						<div class="lirighttop_item">金额占比<span>{{proportion}}%</span></div>
					</div>
					<div class="lirighttop">
						<div class="lirighttop_item">
							披露融资金额<span><a v-if="rzJe">{{rzJe.toFixed(2)}}</a>亿</span>
						</div>
						<div class="lirighttop_item">
							环比上年
							<span class="sactive">{{qoqrate}}%
							<img v-if="qoqrate>=0" src="../../../public/images/capital/capUp@2x.png" >
							<img v-else src="../../../public/images/capital/down.png" ></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'capital3',
		data() {
			return{
				cockpitData:[],
				mappingName:'',
				rzNum:'',
				rzJe:'',
				proportion:'',
				qoqrate:'',
				tNum:0
			}
		},
		mounted() {
			this.getList()
			
		},

		methods: {
			gettitleData(){
				let index=this.tNum
				this.mappingName=this.cockpitData[index].mapping_name
				this.rzNum=this.cockpitData[index].rznum
				this.rzJe=this.cockpitData[index].rzje
				this.proportion=this.cockpitData[index].proportion
				this.qoqrate=this.cockpitData[index].qoqrate
			},
			async getList(){
				var dt = {
					"params": {
							"normGuid": "c1dd4a0e-5fa0-4396-8c3e-61da8f35770e",
							"fieldList": [ {
								"key": "area",
								"value": "宁波"
							}, {
								"key": "form",
								"value": "新材料"
							}]
						}
				};
				var _this = this;
				const aaa = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
				let {custom:{result}}={...aaa}
				this.cockpitData=result.cockpitData
				let rzjelist=this.cockpitData.map(item=> {return item.rzje})
				let ii=0
				rzjelist.forEach(item=>{
					if(item==0){
						ii++
					}
				})
				if(ii!=this.cockpitData.length){
					this.gettitleData()
					this.$nextTick(()=>{
						this.myEcharts();
					})
				}
			},
			myEcharts() {
				// let datavalue = [10,15,75]
				// let dataname = ['关键战略材料','前沿新材料','先进基础材料']
				let dataname=this.cockpitData.map(item=>{
					return item.mapping_name
				})
				let datavalue=this.cockpitData.map(item=>{
					return item.rznum
				})
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart) ;
				let myColor = ['#9561DF','#F8D08B','#52A2FE','#00F6FF','#FAE8DC','#54D490'] ;
				let datalist = []
				
				let dataSum=0
				for (var i=0;i<dataname.length;i++) {
					dataSum+=datavalue[i]
					datalist.push({
							value: datavalue[i],
							name: dataname[i],
							itemStyle: {
								color:myColor[i]
							},
							
						});
				}
				let objData = array2obj(datalist, "name");
				function array2obj(array, key) {
					
				    var resObj = {};
				    for (var i = 0; i < array.length; i++) {
				        resObj[array[i][key]] = array[i];
				    }
					// console.log(resObj)
				    return resObj;
				}
				// console.log(datalist);
				//配置图表
				if (myChart==null) {
					myChart = this.$echarts.init(this.$refs.myChart);  //利用原型调取Echarts的初始化方法
				}
				
				var option = {
				    
				    tooltip: {
						show:false,
						trigger: 'item',

					},
					grid: {
						left: 20,
						right: 150,
						top:'25%',
						width:'61%',
						containLabel: true
					},
					legend:{
						show: true,
						itemHeight: 10,
						itemWidth: 10,
						icon:'circle',
						orient: 'vertical',
					    right: '12%',
					    top:'middle',
					    bottom: 16,
					    width:'30%',
					    itemGap:6,
					    textStyle: {
							color:'#D9E3EC',
							fontSize: 15,
							lineHeight:19,
							padding: [0, 0, 0, 6]
						},
						formatter:function (name){
							let p1;
							if(objData[name].value!=0){
								 p1 =(objData[name].value / dataSum*100).toFixed(2);
							}else{
								 p1=0
							}
							return name+' '+p1+'%'
						}
					},
					series:
					    [{
					        type: 'pie',
							color:myColor,
							radius: ['45%', '70%'],
							center:['25%','50%'],
					        data: datalist,
							labelLine: {
							    show: false
							},
							label:{
								show: false
							},
					    }]
				};
				myChart.on('click',  param=> {// 这个params可以获取你要的图中的当前点击的项的参数
				    this.tNum=param.dataIndex
					this.gettitleData()
					for(let i in datalist){
						if(i==param.dataIndex){
							myChart.dispatchAction({
								type: 'highlight',//突出高亮显示;
								seriesIndex: 0,
								dataIndex: param.dataIndex
							})
						}else{
							myChart.dispatchAction({
								type: 'downplay',//突出高亮显示;
								seriesIndex: 0,
								dataIndex: i
							})
						}
					}
				});
				myChart.setOption(option);  //将编写好的配置项挂载到Echarts上
				// window.addEventListener("resize", function() {
				// 	myChart.resize();  //页面大小变化后Echarts也更改大小
				// });
				
			}
			
		}
	}
</script>

<style scoped>
	.capital3{
		width: 418px;
		height: 267px;
		/* background: rgba(3, 16, 38, 0.71); */
		position: relative;
	}
	.capital3_list{
		width: 389px;
		height: 70px;
		margin-left: 17px;
		display: flex;
	}
	.capital3_lileft{
		width: 106px;
		height: 70px;
		display: flex;
	}
	.capital3_line{
		position: absolute;
		top: 64%;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 389px;
		height: 2px;
	}
	.capital3_line img{
		width: 100%;
		height: 100%;
	}
	.lileftimg{
		width: 11px;
		height: 23px;
		margin-top: 22px;
	}
	.lileftimg img{
		width: 11px;
		height: 23px;
	}
	.lilefttext{
		text-align: center;
		font-size: 18px;
		font-family: SourceHanSansCN-Regular;
		font-weight: bold;
		line-height: 24px;
		color: #FFFFFF;
		margin-left: 10px;
		margin-top: 15px;
	}
	.capital3_liright{
		width: 283px;
		height: 60px;
		margin-top: 10px;
	}
	.lirighttop{
		width: 307px;
		height: 30px;
		margin-left: 5px;
		display: flex;
		justify-content: space-between;
	}
	.lirighttop_item{
		font-size: 14px;
		font-family: SourceHanSansCN-Regular;
		font-weight: 500;
		line-height: 30px;
		color: #FFFFFF;
		width: 150px;
		height: 30px;
	}
	.lirighttop_item span{
		font-size: 14px;
		font-family: SourceHanSansCN-Regular;
		font-weight: 800;
		line-height: 30px;
		color: #FAE8DC;
		margin-left: 5px;
	}
	.lirighttop_item  .sactive{
		font-size: 14px;
		font-family: SourceHanSansCN-Regular;
		font-weight: 800;
		line-height: 30px;
		color: #1CECF4;
		position: relative;
	}
	.lirighttop_item .sactive img{
		width: 13px;
		height: 18px;
		position: absolute;
		top: -3px;
	}
</style>
